<template>
	<view class="artisterBg" :style="{backgroundImage: 'url('+ArtisterInfo.BackgroundPic+')'}">
		<view class="status_bar" style="height:90rpx">
			<fui-status-bar background="none" isFixed></fui-status-bar>
		</view>
		<view class="goBack" @click="goBack">
			<fui-icon name="arrowleft" color="#FFF" v-if="launch == 0"></fui-icon>
			<image :src="baseUrl + 'icon/home.png'" v-else class="marginLeft-30" style="height: 70rpx;width: 70rpx;">
			</image>
		</view>

		<fui-toast ref="toast"></fui-toast>

		<view class="" v-if="isYulan == 1" class="row-center fs-28 fixed bottom left right"
			style="padding: 14px 0;background-color: rgba(0,0,0,0.5);;z-index: 999;color:#fff">
			<uni-icons type="eye" color="#fff" size="24"></uni-icons>
			<text class="marginLeft-10">正在以访客视角浏览你的主页</text>
		</view>
		<view class="artisterBottom flexbc" v-else>

			<button class="shareBtn flex-1" style="flex: 1;" open-type="share">
				<view class="absolute left right bottom" style="top: -40rpx;margin: auto;">
					<view class="iconfont icon-fenxiang1 bold" style="color:#646464;font-size: 26px;"></view>
				</view>
			</button>

			<view v-if="UserRelation.isZan === 2" class="iconfont icon-dianzan1 favokBtn flex-1"
				@click="favArtister(-2)"></view>

			<view v-else class="iconfont icon-dianzan favBtn flex-1" @click="favArtister(2)"></view>

			<button class="shareBtn flex-1" @click="sendRosePop">
				<view class="absolute left right bottom" style="top: -8rpx;margin: auto;">
					<image :src="baseUrl + 'icon/giftFlower.png'" mode="aspectFit" style="width: 50rpx;height: 50rpx;">
					</image>
				</view>
			</button>

			<view class="contact flex-4" @click="onSpeedContact">极速联系</view>
			<view class="sendMsg flex-4" @click="chatMsg">发起沟通</view>

		</view>

		<fui-bottom-popup safeArea :show="rosePopupShow" @close="closePopup">
			<view class="fui-custom__wrap">
				<view class="popupTitle flexbc">
					<view @click="closePopup">
						<fui-icon name="close" size="48"></fui-icon>
					</view>
					<view class="fs-36">打赏</view>
					<view></view>
				</view>
				<view style="padding:10rpx;margin-top:10rpx;margin-left:17rpx">
					<view class="rose" v-for="(item, index) in GiftList" :key="index"
						:style="{background:(currGift.RewardGiftID===item.RewardGiftID?'#282b34':''),borderColor:(currGift.RewardGiftID===item.RewardGiftID?'#747683':'')}"
						@click="selectGift(item)">
						<view
							style="width:100rpx;height:100rpx;padding:10rpx;padding-top:15rpx;margin:auto;line-height:100rpx;">
							<image :src="item.RewardGiftPNG" mode="heightFix" style="height:90%"></image>
						</view>
						<view style="font-size:24rpx;color:#FFF;padding:10rpx;padding-top:5rpx">
							{{ item.RewardGiftPrice }} 金币
						</view>
						<view v-if="currGift.RewardGiftID===item.RewardGiftID"
							style="background-color:#ff004e;color:#FFF;text-align:center;border-radius:0rpx 0rpx 15rpx 15rpx;padding:6rpx"
							@click="sendGift(item)">赠送</view>
						<view v-else style="padding:6rpx">{{item.RewardGiftName}}</view>
					</view>
				</view>
			</view>
		</fui-bottom-popup>
		<view class="artisterTop"></view>
		<view class="artisterTitles">

			<view class="artisterHeadpic">
				<head-wear :width="150" :height="150" border-width="6" :WxHeadPic="ArtisterInfo.WxHeadPic"
					:userInfo="ArtisterInfo" :UserLevelID="ArtisterInfo.UserLevelID" image-height="30" image-width="40"
					size="20" oneRight="0"></head-wear>
			</view>
			<view v-if="UserRelation.isGuanzhu === 1" class="interestBtn" @click="interestBtn(-1)">已关注</view>
			<view v-else class="interestBtn" @click="interestBtn(1)">关注</view>
			<view class="artisterInfo">
				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
					<view style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
						<view
							style="font-size:36rpx;font-weight:bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 80%;">
							{{ ArtisterInfo.NickName }}
						</view>
						<image :src="baseUrl + 'icon/boy.png'" style="width:30rpx;height: 30rpx;margin-left: 10rpx;"
							v-if="ArtisterInfo.UserSex && JSON.parse(ArtisterInfo.UserSex).value == 1"></image>
						<image :src="baseUrl + 'icon/girl.png'" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
							v-if="ArtisterInfo.UserSex && JSON.parse(ArtisterInfo.UserSex).value == 0"></image>
						<auth-label height="32" size="20" v-if="ArtisterInfo.isAuthOk == 2"></auth-label>
						<personality-label height="32" size="20"
							v-if="ArtisterInfo.BeautifulWomen == 1"></personality-label>
						<image :src="baseUrl + 'icon/enterprise.png'" class="company-image-size marginLeft-10"
							v-if="CompanyInfoState.isAuthOk == 2"></image>
					</view>

					<view style="font-size:20rpx;color:#999" v-if="ArtisterInfo.isOnline == 1">在线</view>
					<view v-else style="font-size:20rpx;color:#999">
						{{ $common.timeDiff(ArtisterInfo.onlineTime, new Date())}}
					</view>
				</view>
				<view class="artLabelBox flexbc" style="margin-top: 10rpx;">
					<view style="font-size:24rpx;color:#999" v-if="ArtisterInfo">
						<text v-for="(item,index) in ArtisterInfo.PublicRoles" :key="index">
							{{ item.LabelName }}
							<text v-if="index < (ArtisterInfo.PublicRoles.length-1)">・</text>
						</text>
						<text v-if="ArtisterInfo.UserCity !== '请设置您所在的城市'">｜{{ ArtisterInfo.UserCity }}</text>
					</view>
					<view style="display: flex; justify-content: flex-end;align-items: center;align-items:center;"
						@click.stop="onComplaint(`/pages/index/complaint/index?UserID=${ArtisterInfo.UserID}&FeedbackType=2`)">
						<uni-icons type="info" size="16" color="#999"></uni-icons>
						<text style="font-size: 24rpx;color:#999;margin-left: 4rpx;">投诉</text>
					</view>
				</view>

				<view style="font-size:26rpx;margin-top: 10rpx"
					v-if="CompanyInfoState.isAuthOk == 2 && CompanyInfoState.Info">
					<text>认证企业：</text>
					<text style="color: #00aaff"
						@click="$common.goNavPage(`/artistesPages/pages/enterpriseDetail?ArtisterID=${ArtisterInfo.UserID}`)">{{ CompanyInfoState.Info.CompanyAllName }}</text>
				</view>

				<view class=" " style="padding-top:20rpx;display: flex;flex-direction: row;align-items: center;">
					<view style="font-size: 26rpx;color:#999;margin-right:20rpx;">人气 <text
							style="font-size: 30rpx;margin-left: 8rpx;color: #000;">{{ UserCount.renqi }}</text></view>
					<view style="font-size: 26rpx;color:#999;margin-right:20rpx;">粉丝 <text
							style="font-size: 30rpx;margin-left: 8rpx;color: #000;">{{ UserCount.fensi }}</text></view>
					<view style="font-size: 26rpx;color:#999;margin-right:20rpx;">赞 <text
							style="font-size: 30rpx;margin-left: 8rpx;color: #000;">{{ UserCount.huozan }}</text></view>
					<view style="font-size: 26rpx;color:#999;">礼物 <text
							style="font-size: 30rpx;margin-left: 8rpx;color: #000;">{{ UserCount.meili }}</text></view>
				</view>
			</view>
		</view>

		<view class="artisterPages" v-if="ArtisterInfo && ArtisterInfo.isArtister === 0">
			<view class="artisterTab">
				<fui-tabs :tabs="bArtisterPages" :current="tabIndex" @change="changePages" selectedColor="#000"
					sliderBackground="#FFDD00"></fui-tabs>
			</view>
			<swiper :current="tabIndex" :duration="300" @change="tabChange" style="height:1320rpx">
				<swiper-item class="fui-swiper__item">
					<scroll-view :scroll-y="scrollok" style="height:1295rpx" @scrolltolower="onPullUpLoading(2)">
						<view>
							<view v-if="WorksList.length != 0" class="waterfall">
								<view v-for="(item,key) in WorksList" :key="key" class="waterfall-item"
									style="padding: 20rpx 30rpx;"
									@click="navDetail('/works/details?WorksID=',item.WorksID)">
									<view v-if="item.WorksUrls && JSON.parse(item.WorksUrls).length != 0"
										style="display: flex;flex-wrap: wrap;">
										<view :style="{
													width: item.WorksUrls && JSON.parse(item.WorksUrls).length > 2? 'calc((100% - 20rpx) / 3)' : 'calc((100% - 20rpx) / 2)',
													height:'240rpx',
													marginRight: item.WorksUrls && JSON.parse(item.WorksUrls).length > 2 && (k + 1) % 3 == 0 ||  JSON.parse(item.WorksUrls).length <= 2 && (k + 1) % 2 == 0 ? '0' : '10rpx',
													marginTop: '10rpx'
												}" v-for="(j, k) in JSON.parse(item.WorksUrls)" :key="k"
											@click.stop="showPhotos(item.WorksUrls, k , 'ZP')">
											<image :src="j" mode="aspectFill" style="width: 100%;height: 100%;"
												class="words-image">
											</image>
										</view>

									</view>

									<view style="font-size: 30rpx;margin-top: 15rpx;font-weight: bold;"
										v-if="item.WorkName">{{item.WorkName}}</view>
									<view
										style="font-size: 26rpx;color: #b7b7b7; margin-top: 20rpx;letter-spacing: 2rpx;"
										v-if="item.WorkMemo">{{item.WorkMemo}}</view>

									<view style="display: flex;flex-wrap: wrap;margin-top: 25rpx;">
										<view
											style="margin-right: 15rpx;padding: 8rpx; 14rpx;background-color: #e4e4e4;font-size: 22rpx;border-radius: 5rpx;"
											v-for="(j, k) in item.WorkLabels" :key="k">
											{{j.LabelName}}
										</view>
									</view>
									<view style="margin-top: 25rpx;border-top: 1rpx solid #f0f0f0;"></view>
									<view
										style="display: flex;justify-content: space-between;font-size: 24rpx;color: #d6d6d6;margin-top: 20rpx;">
										<view>
											{{ $common.timeDiff(item.addTime) }}
										</view>
										<view>
											阅读 {{item.ReadCount}}
										</view>
									</view>

								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>
							<view class="noneInfos" v-else>暂无信息</view>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="fui-swiper__item">
					<scroll-view :scroll-y="scrollok" style="height:1295rpx;background-color:#F7F8FA ;"
						@scrolltolower="onPullUpLoading(3)">
						<view>
							<view class="" v-if="NoticeList.length != 0">
								<view class="indexBox" v-for="(item,key) in NoticeList" :key="key"
									@click="navDetail('/notice/details?NoticeID=',item.NoticeID)">
									<view class="NoticeStateBox">
										<!-- <fui-icon name="location" :size="30"></fui-icon>
										<text class="onCity">{{ item.City }}</text> -->
										<view class="stateBox" v-if="item.NoticeState == 2">招募中</view>
										<view class="stateBox" style="background-color: #F1F1F1;color: #999A9C;"
											v-if="item.NoticeState == 3 || item.NoticeState == 4 || item.NoticeState == 5">
											已结束</view>
									</view>
									<view class="flexbc" style="padding-top: 36rpx;">
										<view class="noticeTitle">
											<text style="display: flex;flex-wrap: nowrap;">{{ item.ClassName }}</text>
											<text style="margin-left:0rpx">・</text>
											<text v-if="item.PriceType && JSON.parse(item.PriceType).value === 1"
												style="display: flex;align-items: center;flex-wrap: nowrap;">
												<text>¥</text>
												<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
												<text v-else>
													{{ item.StartPrice|formatPrice }}~{{ item.EndPrice|formatPrice }}
												</text>
												<text>{{ JSON.parse(item.Unit).text}}</text>
											</text>
											<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
										</view>

									</view>
									<view class="flexbc">
										<view class="leftTexts">
											<view class="noticeMemo">{{item.NoticeMemo}}</view>
											<view class="userlabel">
												<view>{{ item.NoticeTarget.LabelName }}</view>
												<view>性别要求：{{ item.SexLimit ? JSON.parse(item.SexLimit).text : '' }}
												</view>
											</view>
											<view class="userInfo">
												<!-- <view class="userHeadPic">
													<image :src="item.Publicer.WxHeadPic"></image>
												</view>
												<view class="userNicker">{{item.Publicer.NickName}}</view>
												<image :src="baseUrl + 'icon/authed.png'" class="authed"
													v-if="item.Publicer.isAuthOk == 1"></image> -->
											</view>
										</view>
										<view class="rightPic" v-if="item.NoticePics">
											<image :src="JSON.parse(item.NoticePics)[0]" mode="aspectFill">
											</image>
										</view>
									</view>
									<view class="" v-if="item.City">
										<fui-icon name="location" :size="30"></fui-icon>
										<text class="onCity">{{ item.City }}</text>
									</view>
									<view class="indexBoxBottom flexbc">
										<view>
											{{ $common.timeDiff(item.showTime,new Date()) }}
										</view>
										<view class="indexBoxCount flexbc">
											<view class="getBaoming">
												<view style="float:left">
													<image :src="baseUrl + 'icon/mail.png'" class="mailicon"></image>
												</view>
												<view style="float:left"><text>{{ item.BaomingCount }}</text></view>
											</view>
											<view class="readcount">
												<view style="float:left">
													<image :src="baseUrl + 'icon/show.png'" class="showicon"></image>
												</view>
												<view style="float:left"><text>{{ item.ReadCount }}</text></view>
											</view>
										</view>
									</view>
								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>

							<view class="noneInfos" v-else>暂无信息</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>

		</view>

		<view class="artisterPages" v-if="ArtisterInfo && ArtisterInfo.isArtister === 1">
			<view class="artisterTab">
				<fui-tabs :tabs="aArtisterPages" :current="tabIndex" @change="changePages" selectedColor="#000"
					sliderBackground="#FFDD00"></fui-tabs>
			</view>
			<swiper :current="tabIndex" :duration="300" @change="tabChange" style="height:1300rpx">
				<swiper-item class="fui-swiper__item">
					<scroll-view :scroll-y="scrollok" style="height:1295rpx" @scrolltoupper="onScrolltoupper">
						<view>
							<view class="artisterBaseInfo artisterBox" style="margin:0rpx;border-top:1rpx solid #f0f0f0"
								v-if="UserBaseinfo !== null">
								<view class="artisterInfoTitle">形象信息</view>
								<view class="flexbc">
									<view style="font-size:24rpx;text-align:center;padding:20rpx;">
										<view>{{ UserBaseinfo.shengao }}</view>
										<view>身高</view>
									</view>
									<view style="font-size:24rpx;text-align:center;padding:20rpx;">
										<view>{{ UserBaseinfo.tizhong }}</view>
										<view>体重</view>
									</view>
									<view style="font-size:24rpx;text-align:center;padding:20rpx;">
										<view>
											{{ UserBaseinfo.sanwei[0] }}-{{ UserBaseinfo.sanwei[1] }}-{{ UserBaseinfo.sanwei[2] }}
										</view>
										<view>三围</view>
									</view>
									<view style="font-size:24rpx;text-align:center;padding:20rpx;"
										v-if="ArtisterInfo.UserSex && JSON.parse(ArtisterInfo.UserSex).value == 0">
										<view>{{ UserBaseinfo.zhaobei }}</view>
										<view>罩杯</view>
									</view>
									<view style="font-size:24rpx;text-align:center;padding:20rpx;">
										<view>{{ UserBaseinfo.jiaoma }}</view>
										<view>鞋码</view>
									</view>
								</view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:auto;" v-if="ArtisterInfo.UserMemo">
								<view class="artisterInfoTitle">个人简介</view>
								<view style="padding:10rpx;background-color:#FFF;margin-top:10rpx;color:#999">
									{{ ArtisterInfo.UserMemo }}
								</view>
							</view>
							<view class="artisterPhoto artisterBox" style="height:430rpx;"
								v-if="ArtisterInfo.UserVideos != null && JSON.parse(ArtisterInfo.UserVideos).length !== 0">
								<view class="artisterInfoTitle">形象视频</view>
								<view style="padding:30rpx;text-align:center;">
									<video id="video" @play="play" @fullscreenchange="fullscreenchange"
										:src="JSON.parse(ArtisterInfo.UserVideos)[0]"
										style="width:600rpx;height:360rpx" />
								</view>
							</view>


							<view class="artisterPhoto artisterBox" style="height:400rpx;"
								v-if="UserPhotos && UserPhotos.length != 0">
								<view class="artisterInfoTitle">形象照片</view>
								<view class="artPics" v-if="UserPhotos !== null">

									<view class="artPic" v-for="(item,index) in UserPhotos" :key="index"
										v-if="index < 3" @click="showPhoto(UserPhotos, index, 'XXZP')">
										<zero-lazy-load borderRadius="10" height="300" :image="item"
											imgMode='aspectFill'></zero-lazy-load>
										<view class="" v-if="index == 2 &&  ArtisterInfo.UserPhotosCount > 3"
											style="width: 70rpx;height: 70rpx;background: gold;clip-path: polygon(100% 0%, 0 100%, 100% 100%);position: absolute;bottom: 0;right: 0;border-radius: 0 0 10rpx 0;">
											<text
												style="position: absolute;bottom: 4rpx;right: 4rpx;font-size: 24rpx;">{{ ArtisterInfo.UserPhotosCount }}张</text>
										</view>
									</view>
								</view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:130rpx;" v-if="isVipInfo">
								<view class="artisterInfoTitle">私密相册</view>

								<view v-if="LoginInfo.UserLevelID === 0">
									<button class="sm-btn" @click="gotoVIP">打开私密相册</button>
								</view>
								<view v-if="LoginInfo.UserLevelID === 1">
									<button class="sm-btn" @click="gotoVIP">打开私密相册</button>
								</view>
								<view v-if="LoginInfo.UserLevelID === 2">
									<button class="sm-btn" @click="gotoArtiterVIP(ArtisterInfo.UserID)">打开私密相册</button>
								</view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:auto;"
								v-if="SetRoleLabels && SetRoleLabels.length != 0">
								<view class="flexbc">
									<span class="artisterInfoTitle">身份标签</span>
								</view>
								<view style="padding-top:20rpx;">
									<view class="label" v-for="(item,index) in SetRoleLabels" :key="index">
										{{ item.text }}
									</view>
								</view>
								<view style="clear:both;"></view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:auto;"
								v-if="(MyNoticeLabels &&  MyNoticeLabels.length != 0) || ( MyPingmianLabels && MyPingmianLabels.length != 0)">
								<view class="flexbc">
									<span class="artisterInfoTitle">接单通告</span>
								</view>
								<view style="padding-top:20rpx;">
									<view class="label" v-for="(item,index) in MyNoticeLabels" :key="index">
										{{ item.text }}
									</view>
									<view style="clear:both">
										<view v-for="(item,index) in MyPingmianLabels" :key="index">
											<view v-for="(itm,idx) in item.Labels" :key="idx">
												<view class="label" v-if="itm.vip == false">
													{{ itm.text }}
												</view>
												<view class="label"
													v-if="LoginInfo.UserLevelID == 2 && itm.vip == true">
													{{ itm.text }}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view style="clear:both;"></view>
							</view>

							<view class="artisterStyle artisterBox" style="height:auto;"
								v-if="ArtisterInfo.xingxiangLabels != null && JSON.parse(ArtisterInfo.xingxiangLabels).length != 0">
								<view class="artisterInfoTitle">形象风格</view>
								<view class="label" v-for="(item,key) in JSON.parse(ArtisterInfo.xingxiangLabels)"
									:key="key">
									{{ item.text }}
								</view>
								<view style="clear:both;"></view>
							</view>
						</view>

					</scroll-view>
				</swiper-item>
				<swiper-item class="fui-swiper__item" v-if="MokaList.length > 0">
					<scroll-view :scroll-y="scrollok" style="height:1295rpx" @scrolltolower="onPullUpLoading(1)">
						<view>
							<view v-if="MokaList.length != 0" class="waterfall">
								<view v-for="(item,key) in MokaList" :key="key" class="waterfall-item"
									@click="showPhoto(MokaList, key ,'moka')">
									<image :src="item.MokaOkUrl" mode="widthFix" class=""
										style="width: 100%;display: block;display: flex;justify-content: center;align-items: center;">
									</image>
								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>
							<view class="noneInfos" v-else>暂无信息</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="fui-swiper__item" v-if="WorksList.length > 0">
					<scroll-view :scroll-y="scrollok" style="height:1295rpx" @scrolltolower="onPullUpLoading(2)">
						<view>
							<view v-if="WorksList.length != 0" class="waterfall">
								<view v-for="(item,key) in WorksList" :key="key" class="waterfall-item"
									style="padding: 20rpx 30rpx;"
									@click="navDetail('/works/details?WorksID=',item.WorksID)">
									<view v-if="item.WorksUrls && JSON.parse(item.WorksUrls).length != 0"
										style="width: 100%;display: flex;flex-wrap: wrap;">
										<image v-for="(j, k) in JSON.parse(item.WorksUrls)" :key="k" :src="j"
											mode="aspectFill" class="words-image" :style="{
												width: JSON.parse(item.WorksUrls).length > 2? 'calc((100% - 20rpx) / 3)' : 'calc((100% - 20rpx) / 2)',
												height:'240rpx',
												marginRight: JSON.parse(item.WorksUrls).length > 2 && (k + 1) % 3 == 0 ||  JSON.parse(item.WorksUrls).length <= 2 && (k + 1) % 2 == 0 ? '0' : '10rpx',
												marginTop: '10rpx'
											}" @click.stop="showPhotos(item.WorksUrls, k , 'ZP')">
										</image>
									</view>
									<view style="font-size: 30rpx;margin-top: 15rpx;font-weight: bold;"
										v-if="item.WorkName">{{item.WorkName}}</view>
									<view
										style="font-size: 26rpx;color: #b7b7b7; margin-top: 20rpx;letter-spacing: 2rpx;"
										v-if="item.WorkMemo">{{item.WorkMemo}}</view>

									<view style="display: flex;flex-wrap: wrap;margin-top: 25rpx;">
										<view
											style="margin-right: 15rpx;padding: 8rpx; 14rpx;background-color: #e4e4e4;font-size: 22rpx;border-radius: 5rpx;"
											v-for="(j, k) in item.WorkLabels" :key="k">
											{{j.LabelName}}
										</view>
									</view>
									<view style="margin-top: 25rpx;border-top: 1rpx solid #f0f0f0;"></view>
									<view
										style="display: flex;justify-content: space-between;font-size: 24rpx;color: #d6d6d6;margin-top: 20rpx;">
										<view>
											{{ $common.timeDiff(item.addTime) }}
										</view>
										<view>
											阅读 {{item.ReadCount}}
										</view>
									</view>

								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>
							<view class="noneInfos" v-else>暂无信息</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="fui-swiper__item" v-if="NoticeList.length > 0">
					<scroll-view :scroll-y="scrollok" style="height:1295rpx;background-color:#F7F8FA ;"
						@scrolltolower="onPullUpLoading(3)">
						<view>
							<view class="" v-if="NoticeList.length != 0">
								<view class="indexBox" v-for="(item,key) in NoticeList" :key="key"
									@click="navDetail('/notice/details?NoticeID=',item.NoticeID)">
									<view class="NoticeStateBox">
										<!-- <fui-icon name="location" :size="30"></fui-icon>
										<text class="onCity">{{ item.City }}</text> -->
										<view class="stateBox" v-if="item.NoticeState == 2">招募中</view>
										<view class="stateBox" style="background-color: #F1F1F1;color: #999A9C;"
											v-if="item.NoticeState == 3 || item.NoticeState == 4 || item.NoticeState == 5">
											已结束</view>
									</view>
									<view class="flexbc" style="padding-top: 36rpx;">
										<view class="noticeTitle">
											<text style="display: flex;flex-wrap: nowrap;">{{ item.ClassName }}</text>
											<text style="margin-left:0rpx">・</text>
											<text v-if="item.PriceType && JSON.parse(item.PriceType).value === 1"
												style="display: flex;align-items: center;flex-wrap: nowrap;">
												<text>¥</text>
												<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
												<text v-else>
													{{ item.StartPrice|formatPrice }}~{{ item.EndPrice|formatPrice }}
												</text>
												<text>{{ JSON.parse(item.Unit).text}}</text>
											</text>
											<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
										</view>
									</view>
									<view class="flexbc">
										<view class="leftTexts">
											<view class="noticeMemo">{{item.NoticeMemo}}</view>
											<view class="userlabel">
												<view>{{ item.NoticeTarget.LabelName }}</view>
												<view>性别要求：{{ item.SexLimit ? JSON.parse(item.SexLimit).text : '' }}
												</view>
											</view>
											<view class="userInfo">
												<!-- <view class="userHeadPic">
													<image :src="item.Publicer.WxHeadPic"></image>
												</view>
												<view class="userNicker">{{item.Publicer.NickName}}</view>
												<image :src="baseUrl + 'icon/authed.png'" class="authed"
													v-if="item.Publicer.isAuthOk == 1"></image> -->
											</view>
										</view>
										<view class="rightPic" v-if="item.NoticePics">
											<image :src="JSON.parse(item.NoticePics)[0]" mode="aspectFill">
											</image>
										</view>
									</view>
									<view class="" v-if="item.City">
										<fui-icon name="location" :size="30"></fui-icon>
										<text class="onCity">{{ item.City }}</text>
									</view>
									<view class="indexBoxBottom flexbc">
										<view>
											{{ $common.timeDiff(item.showTime,new Date()) }}
										</view>
										<view class="indexBoxCount flexbc">
											<view class="getBaoming">
												<view style="float:left">
													<image :src="baseUrl + 'icon/mail.png'" class="mailicon"></image>
												</view>
												<view style="float:left"><text>{{ item.BaomingCount }}</text></view>
											</view>
											<view class="readcount">
												<view style="float:left">
													<image :src="baseUrl + 'icon/show.png'" class="showicon"></image>
												</view>
												<view style="float:left"><text>{{ item.ReadCount }}</text></view>
											</view>
										</view>
									</view>
								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>

							<view class="noneInfos" v-else>暂无信息</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<fui-gallery :current="currentIndex" :urls="photoUrls" :show="photoShow" @hide="hideGallery"></fui-gallery>
		<view style="height:120rpx;background-color:#f0f0f0;"></view>

		<uni-popup ref="vipPopup" type="center">
			<view class="" style="background-color: #fff;border-radius: 15px;overflow: hidden;width:80vw">
				<view class="" style="text-align: right;margin: 15px 15px 0 0 ;" @click="$refs.vipPopup.close()">
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>
				<view style="font-size: 28rpx;text-align: center;padding: 10px;color:#4a4a4a;padding-bottom: 35px;">
					对方需要您开通会员后才能沟通
				</view>
				<button style="color: #FF9900;" @click="onNav('/myPages/pages/openVip')">开通会员</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear,
		},
		filters: {
			formatPrice(price) {
				if (price > 10000) {
					return price / 10000 + 'w';
				} else if (price > 1000) {
					return price / 1000 + 'k'
				} else {
					return parseInt(price, 10);
				}
			}
		},
		data() {
			return {
				LoginInfo: {
					UserID: 0,
					isArtister: 0,
					UserLevelID: 0,
					isAuthOk: 0
				},
				WalletYue: 0,
				ArtisterID: 0,
				bArtisterPages: [{
						name: '作品'
					},
					{
						name: '通告'
					}
				],
				aArtisterPages: [],
				scrollok: false,
				tabIndex: 0,
				ArtisterInfo: {},
				UserBaseinfo: {},
				UserPhotos: [],
				SetRoleLabels: [],
				MyNoticeLabels: [],
				MyPingmianLabels: [],
				WorksList: [],
				MokaList: [],
				GiftList: [],
				currGift: {
					RewardGiftID: 0
				},
				rosePopupShow: false,
				photoUrls: [],
				photoShow: false,
				// 通告信息
				NoticeList: [],
				ListType: -1,
				isYulan: 0,
				launch: 0,
				UserRelation: {},
				UserCount: {},
				// 判断vip 信息是否存在
				isVipInfo: true,
				more: '',
				tabIndexID: 0,
				currentIndex: 0, // 预览 Index
				mokaPage: 1,
				WorksPage: 1,
				NoticePage: 1,
				baseUrl: '',
				// 企业信息
				CompanyInfoState: {}
			};
		},
		onShareAppMessage({
			from,
			target
		}) {

			let mokaUser = this.ArtisterInfo
			let mokaUrl = mokaUser.UserPhotos[0];

			let myObj = {
				title: mokaUser.NickName + "的模卡",
				path: "/artistesPages/pages/artister?artisterID=" + mokaUser.UserID + '&launch=1',
				imageUrl: mokaUrl
			}
			return myObj;
		},
		onPageScroll(e) {
			// console.log('页面滚动距离：', e.scrollTop);
			if (e.scrollTop >= 340) {
				this.scrollok = true
			} else {
				this.scrollok = false
			}
		},
		onShow() {},
		onLoad(options) {
			this.baseUrl = this.$baseUrl;
			// console.log(this.$baseUrl,'$baseUrl')
			// console.log(options, 'options')
			this.mokaPage = 1;
			this.WorksPage = 1;
			this.NoticePage = 1;

			if (options.launch) {
				this.launch = options.launch
			}

			this.isYulan = options.isYulan
			this.artisterID = options.artisterID;

			if (options.scene) {
				// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				var scene = decodeURIComponent(options.scene);
				var sceneObj = {};
				for (var i = 0; i < scene.split('&').length; i++) {
					var arr = scene.split('&')[i].split('=');
					sceneObj[arr[0]] = arr[1];
				}
				this.artisterID = sceneObj.ArtisterID;
				uni.setStorageSync("inviter", sceneObj.ArtisterID);
				this.launch = 1
			}

			if (uni.getStorageSync("isLogin")) {
				this.LoginInfo = uni.getStorageSync("isLogin");
			}


			this.height = 5000;
			this.getArtister();


		},
		methods: {
			// 投诉
			onComplaint(url) {
				if (!uni.getStorageSync("isLogin")) {
					// this.$common.showToast('请先登录！');
					this.$common.goNavPage('/pages/login/weixinlogin');
					return;
				}
				uni.navigateTo({
					url
				})
			},
			onPullUpLoading(index) {
				switch (index) {
					case 1:
						this.mokaPage += 1;
						this.getMyMoka()
						break;
					case 2:
						this.WorksPage += 1;
						this.getMyWorks()
						break;
					case 3:
						this.NoticePage += 1;
						this.getMyTonggao()
						break;
				}
			},
			// 极速联系
			onSpeedContact() {
				if (!this.isGetToken()) return;
				let LoginInfo = uni.getStorageSync("isLogin");
				if (LoginInfo.UserID == this.artisterID) {
					uni.showModal({
						content: "自己不能和联系自己！"
					})
					return false;
				}

				uni.navigateTo({
					url: `/artistesPages/pages/speedContact?ArtisterID=${this.ArtisterInfo.UserID}`
				})
			},
			onNav(url) {
				uni.navigateTo({
					url
				})
			},
			onScrolltoupper(event) {

				if (event.detail.direction = "top") {
					// this.scrollok = false
				}
			},
			// 播放时进入全屏
			play() {
				let videoContext = uni.createVideoContext('video', this)
				videoContext.requestFullScreen()
			},

			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext('video', this).pause();
				}
			},
			//退出全屏时停止
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					let videoContext = uni.createVideoContext('video', this)
					videoContext.stop()
				}
			},
			showVideo1(t) {
				if (t == 0) {
					let videoContext = wx.createVideoContext('myVideo1'); //获取video的dom
					// console.log('play', videoContext)
					videoContext.requestFullScreen({
						direction: 90
					});
					videoContext.play() //视频播放
				} else {
					videoContext.stop() //停止播放
				}
			},
			screenChange(e) {
				let fullScreen = e.detail.fullScreen //值true为进入全屏，false为退出全屏
				let videoContext = wx.createVideoContext('myVideo1');
			},

			showPhotos(photos, index) {
				// console.log('photos', photos)
				photos = photos ? JSON.parse(photos) : [];
				uni.previewImage({
					current: index,
					urls: photos,
					showmenu: true,
				})
			},


			showPhoto(photos, index, isType) {
				var photoUrls = [];
				if (isType == 'moka') {
					photos.forEach(item => {
						if (!!item.MokaOkUrl) photoUrls.push(item.MokaOkUrl)
					})
				} else {
					photoUrls = [...photoUrls, ...photos]
				}
				uni.previewImage({
					current: index,
					urls: photoUrls,
					showmenu: true,
				})
			},
			hideGallery() {
				this.photoShow = false;
			},
			gotoVIP() {
				if (!this.isGetToken()) return;

				uni.showModal({
					title: '私密相册仅VIP会员可见',
					confirmText: '升级VIP',
					success: res => {
						if (res.confirm) {
							this.$common.goNavPage('/myPages/pages/openVip')
						}
					}
				})

				// 最开始跳转路径
				// this.$common.goNavPage('/myPages/pages/openVip')

				// 后改的路径
				// this.$common.goNavPage('/myPages/pages/openMember')
			},
			gotoArtiterVIP(artisterID) {
				if (!this.isGetToken()) return;
				if (this.WalletYue < 10) {
					uni.showModal({
						title: '金币不足！',
						content: '您的金币余额不足，暂不能访问私密相册，请充值',
						confirmText: '去充值',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/myPages/pages/myWallet?UserID=${this.LoginInfo.UserID}`
								})
							}
						}
					})
					return false;
				} else {
					uni.navigateTo({
						url: '/artistesPages/pages/artisterVip?artisterID=' + artisterID
					})
				}
			},
			// 判断有没有登录
			isGetToken() {
				let token = uni.getStorageSync('token')
				let res = true;
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/weixinlogin'
					})
					res = false

				}
				return res
			},
			chatMsg() {
				if (!this.isGetToken()) return;
				let LoginInfo = uni.getStorageSync("isLogin");
				if (LoginInfo.UserID == this.artisterID) {
					uni.showModal({
						content: "自己不能和自己对话！"
					})
				} else {
					if (this.LoginInfo.UserLevelID == 0) {
						// this.$refs.vipPopup.open()
						uni.showModal({
							content: '对方需要您开通会员后才能沟通',
							confirmColor: "#FF9900",
							confirmText: '开通会员',
							showCancel: false,
							success: (ures) => {
								if (ures.confirm) {
									// console.log('执行加入')
									uni.navigateTo({
										url: '/myPages/pages/openMember'
									})
								}
							}
						})
						return false;
					} else {
						this.$httpost('/Message/MeetMsgGroup', {
							UserID: LoginInfo.UserID,
							ArtisterID: this.artisterID
						}).then(res => {
							// console.log('MeetMsgGroup', res);
							if (res.code == 200 && res.data.MsgGroupID !== null) {
								this.$common.goNavPage('/messagePages/pages/msgpage?MsgGroupID=' + res.data
									.MsgGroupID)
							}

						});
					}
				}
			},
			navDetail(url, id) {
				if (!this.isGetToken()) return;
				this.$common.goNavPage(url + id)
			},
			coinToast(coin) {
				let options = {}
				//提示信息
				options.text = '获得 ' + coin + ' 金币';
				//图标图片地址
				options.src = this.$baseUrl + "icon/goldcoin.png";
				this.$refs.toast.show(options)
			},
			shareArtister() {
				this.coinToast(5)
			},
			favArtister(isZan) {

				// 点击先判断有没有登录
				if (!this.isGetToken()) return;

				this.$httpost('/Artister/zan', {
					ArtisterID: this.artisterID,
					isZan: isZan
				}).then(res => {
					this.UserRelation = res.data.UserRelation
					this.UserCount = res.data.UserCount;
					// this.$common.showToast('点赞成功')
					if (res.data.UserRelation.isZan == 2) {
						uni.showToast({
							title: '点赞成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '取消点赞',
							icon: 'success'
						})
					}

				});
			},
			roseToast(gift) {
				let options = {}
				//提示信息
				options.text = '成功送出 ' + gift.RewardGiftName;
				//图标图片地址
				options.src = gift.RewardGiftPNG;
				this.$refs.toast.show(options)
			},
			selectGift(item) {
				if (!this.isGetToken()) return;
				this.currGift = item
			},
			ReCharge() {
				uni.setStorageSync('ReChargeUrl', '/artistesPages/pages/artisterVip?artisterID=' + this.artisterID)
				this.$common.goNavPage('/myPages/pages/reCharge');
			},
			sendGift(item) {
				if (!this.isGetToken()) return;
				let user = uni.getStorageSync("isLogin");

				if (user) {
					if (this.WalletYue >= item.RewardGiftPrice) {
						this.$httpost('/UserAction/SendGift', {
							ArtisterID: this.artisterID,
							GiftID: item.RewardGiftID
						}).then(res => {
							if (res.code == 200) {
								if (res.data !== 0) {
									this.roseToast(item)
									this.getArtister()
									this.closePopup()
								}
							}
						});
					} else {
						uni.showModal({
							title: '金币余额不足，请充值',
							success: (res) => {
								if (res.confirm) {
									uni.setStorageSync('ReChargeUrl',
										'/artistesPages/pages/artister?artisterID=' + this.artisterID)
									this.$common.goNavPage('/myPages/pages/reCharge');
								}
								if (res.cancel) {
									this.closePopup()
								}
							}
						})
					}
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			},
			closePopup(e) {
				if (!this.isGetToken()) return;
				this.rosePopupShow = false

			},
			sendRosePop(e) {
				if (!this.isGetToken()) return;

				this.rosePopupShow = true
			},
			goBack() {

				if (this.launch == 0) {
					uni.navigateBack()
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			changePages(e) {

				this.switchTab(e.index, e.id)
			},
			tabChange(e) {

				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.tabIndex = index;
					this.switchTab(index);
				}
			},
			switchTab(index, id) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;

				this.tabIndexID = id
			},

			getArtister() {
				this.$httpost('/Artister/info', {
					ArtisterID: this.artisterID,
					ShowType: ''
				}).then(res => {
					this.tabIdList = [];
					// console.log('info', res)
					if (res.code == 200) {
						this.WalletYue = Math.round(res.data.WalletYue);
						this.ArtisterInfo = res.data.ArtisterInfo;
						this.CompanyInfoState = res.data.CompanyInfoState;
						this.UserCount = res.data.UserCount;
						if (!this.ArtisterInfo.BackgroundPic) {
							this.ArtisterInfo.BackgroundPic =
								'https://img.1ppt.com/uploads/allimg/1902/1_190213153422_2.JPG';
						}
						this.UserBaseinfo = JSON.parse(res.data.ArtisterInfo.UserBaseinfo);
						this.UserPhotos = res.data.ArtisterInfo.UserPhotos;
						this.SetRoleLabels = JSON.parse(res.data.ArtisterInfo.SetRoleLabels);
						this.MyNoticeLabels = JSON.parse(res.data.ArtisterInfo.MyNoticeLabels);
						this.MyPingmianLabels = JSON.parse(res.data.ArtisterInfo.MyPingmianLabels);
						// Vip 图片
						this.UserVipPhotos = JSON.parse(res.data.ArtisterInfo.UserVipPhotos);
						this.UserVipVideos = JSON.parse(res.data.ArtisterInfo.UserVipVideos);
						this.YoushiLabels = res.data.ArtisterInfo.YoushiLabels;
						this.VipMemo = res.data.ArtisterInfo.VipMemo;


						if (this.ArtisterInfo.YoushiLabels || this.ArtisterInfo.VipMemo || !this.UserVipPhotos
							.length == 0 || Array.isArray(this.UserVipVideos)) {

							this.isVipInfo = true;
						} else {

							this.isVipInfo = false;
						}
					}
				})

				this.$httpost('/Artister/UserRelation', {
					ArtisterID: this.artisterID
				}).then(res => {

					if (res.code == 200) {
						this.UserRelation = res.data;
					}
				})

				this.$httpost('/RewardGifts/Gifts', {}).then(res => {

					if (res.code == 200) {
						this.GiftList = res.data;
					}
				})

				// {name:'主页', id: 0}
				// {name:'模卡', id: 1},
				// {name:'作品', id: 2},
				// {name:'通告', id: 3}

				this.aArtisterPages = [];
				this.aArtisterPages.push({
					name: '主页',
					id: 0
				});

				// 链式调用 保证执行顺序
				this.$httpost('/Artister/moka', {
					ArtisterID: this.artisterID,
					page: 1
				}).then(res => {
					if (res.code == 200) {
						this.MokaList = res.data.MokaList;
						if (res.data.MokaList.length != 0) this.aArtisterPages.push({
							name: '模卡'
						});

						this.$httpost('/Artister/works', {
							ArtisterID: this.artisterID,
							page: 1
						}).then(res => {
							if (res.code == 200) {
								this.WorksList = res.data.WorksList;
								if (res.data.WorksList.length != 0) this.aArtisterPages.push({
									name: '作品'
								});

								this.$httpost('/UserCenter/myTonggao', {
									ListType: this.ListType,
									page: 1,
									UserID: this.artisterID,
								}).then(res => {
									if (res.code == 200) {
										this.NoticeList = res.data.NoticeList;
										if (res.data.NoticeList.length != 0) this.aArtisterPages
											.push({
												name: '通告'
											});
									}
								});
							}
						});
					}
				});
			},

			// 获取作品
			getMyWorksOne() {
				this.$httpost('/Artister/works', {
					ArtisterID: this.artisterID,
					page: 1
				}).then(res => {
					if (res.code == 200) this.WorksList = res.data.WorksList;
				});
			},

			// 作品分页
			getMyWorks() {
				this.more = 'loading';
				this.$httpost('/Artister/works', {
					ArtisterID: this.artisterID,
					page: this.WorksPage
				}).then(res => {
					if (res.code == 200) {
						if (this.WorksList.length != 0) {
							this.WorksList = [...this.WorksList, ...res.data.WorksList];
							if (res.data.WorksList.length == 0) this.more = 'onMore';
						} else {
							this.WorksList = res.data.WorksList;
							this.more = ''
						}
					}
				});
			},
			// 获取moka
			getMyMokaOne() {
				this.$httpost('/Artister/moka', {
					ArtisterID: this.artisterID,
					page: 1
				}).then(res => {
					if (res.code == 200) {
						this.MokaList = res.data.MokaList;
					}
				});
			},


			// 模卡分页
			getMyMoka() {
				this.more = 'loading';
				this.$httpost('/Artister/moka', {
					ArtisterID: this.artisterID,
					page: this.mokaPage
				}).then(res => {
					if (res.code == 200) {
						if (this.MokaList.length != 0) {
							this.MokaList = [...this.MokaList, ...res.data.MokaList];
							if (res.data.MokaList.length == 0) this.more = 'onMore';
						} else {
							this.MokaList = res.data.MokaList;
							this.more = ''
						}
					}
				});
			},

			// 获取通告一条
			getMyTonggaoOne() {
				this.$httpost('/UserCenter/myTonggao', {
					ListType: this.ListType,
					page: 1,
					UserID: this.artisterID,
				}).then(res => {
					if (res.code == 200) this.NoticeList = res.data.NoticeList;
				});
			},

			// 获取通告
			getMyTonggao() {
				this.more = 'loading';
				this.$httpost('/UserCenter/myTonggao', {
					ListType: this.ListType,
					page: this.NoticePage,
					UserID: this.ArtisterInfo.UserID
				}).then(res => {
					if (res.code == 200) {
						if (this.NoticeList.length != 0) {
							this.NoticeList = [...this.NoticeList, ...res.data.NoticeList];
							if (res.data.NoticeList.length == 0) this.more = 'onMore';
						} else {
							this.NoticeList = res.data.NoticeList;
							this.more = ''
						}
						// console.log('我的通告:', res.data.NoticeList)
					}
				});
			},
			interestBtn(isGuanzhu) {
				if (!this.isGetToken()) return;
				// this.coinToast(10);
				this.$httpost('/Artister/guanzhu', {
					ArtisterID: this.artisterID,
					isGuanzhu: isGuanzhu
				}).then(res => {
					this.UserRelation = res.data.UserRelation
					this.UserCount = res.data.UserCount;
				});
			}
		}
	}
</script>

<style lang="scss">
	.sm-btn {
		background-color: #FFDD00;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #fff;
		width: 200rpx;

		&::after {
			border: none;
		}
	}

	.shareBtn {
		padding: 0;
		margin: 20rpx;
		margin-top: 10rpx;
		position: relative;
		background-color: transparent;

		&::after {
			border: none
		}
	}

	.favBtn {
		width: 50rpx;
		height: 50rpx;
		font-size: 30px;
		color: #646464;
		margin: 8rpx 10px 0 14px;
	}

	.favokBtn {
		width: 50rpx;
		height: 50rpx;
		font-size: 30px;
		color: #FFDD00;
		margin: 8rpx 10px 0 14px;
	}

	.fui-custom__wrap {
		width: 100%;
		height: 600rpx;
		background: #151925 // display: flex;
			// align-items: center;
			// justify-content: center;
	}

	.artisterBg {
		width: 100%;
		height: 590rpx;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		background-size: cover;
		background-position: center center;
	}

	.goBack {
		position: absolute;
		z-index: 100;
	}

	.artisterTop {
		height: 200rpx;
	}

	.artisterTitles {
		clear: both;
		margin-top: 300rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		position: relative;
		// height:270rpx;
	}

	.leftTexts {

		flex: 1;
	}

	.artisterHeadpic {
		position: absolute;
		top: -70rpx;
		left: 30rpx;
		width: 150rpx;
		height: 150rpx;
		background-image: url('https://hbimg.b0.upaiyun.com/09c1ac7fa1083b0e1617603a2a23ab33309fc62738293-Yu4IWz_fw658');
		background-size: cover;
		border-radius: 150rpx;
	}

	.interestBtn {
		width: 200rpx;
		height: 60rpx;
		border-radius: 100rpx;
		background-color: $globalColor;
		float: right;
		margin: 20rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.artisterInfo {
		clear: both;
		padding: 30rpx;
		padding-top: 0rpx;
	}

	.artisterCount {
		width: 80vw;
		padding: 30rpx;
	}

	.artisterPages {
		background-color: #f0f0f0;
	}

	.artisterTab {
		display: flex;
		background-color: #FFF;
		justify-content: center;
	}

	.tabItem {
		width: 150rpx;
		padding: 10rpx;
		text-align: center;
	}

	.artisterBox {
		clear: both;
		height: auto;
		padding: 20rpx;
		background-color: #FFF;
		margin-top: 15rpx;
	}

	.artisterInfoTitle {
		font-weight: bold;
		font-size: 30rpx;
	}

	.artisterBottom {
		background-color: #FFF;
		position: fixed;
		z-index: 500;
		// width:100%;
		left: 0;
		right: 0;
		height: 120rpx;
		border-top: 1rpx solid #e0e0e0;
		bottom: 0;
	}

	.contact {
		width: 200rpx;
		height: 60rpx;
		// background-color: #666;
		background-color: #FFCC00;
		color: #FFF;
		border-radius: 10rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 10rpx;
	}

	.waterfall {
		padding-top: 20rpx;
	}

	.waterfall-item {
		width: auto;
		height: auto;
		background: #FFF;
		padding: 20rpx;
		margin-bottom: 20rpx;
		// 	width: calc(33.33% - 20px);
		// 	margin: 0 10px;
		// 	box-sizing: border-box;
		// 	overflow: hidden;
	}

	.waterfall-img {
		width: 100%;
		height: 100%;
	}

	.sendMsg {
		width: 200rpx;
		height: 60rpx;
		background-color: #FFCC00;
		color: #FFF;
		border-radius: 10rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 10rpx;
	}

	.labels {
		padding: 10rpx;
		border: 1rpx solid #CCC;
		border-radius: 10rpx;
		float: left;
		margin: 20rpx;
	}

	.artPics {
		clear: both;
		display: flex;
		// justify-content: space-between;
		margin-top: 40rpx;
	}

	.artPicCount {
		position: absolute;
		z-index: 200;
		bottom: 0;
		right: 0rpx;
		width: 60rpx;
		height: 30rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFF;
		text-align: center;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.artPic {
		width: 29vw;
		height: 300rpx;
		background-color: #999;
		margin: 10rpx;
		position: relative;
		border-radius: 5rpx;
		overflow: hidden;
	}

	.artPic image {
		width: 100%;
		height: 300rpx;
		border-radius: 5rpx;
	}

	.noneInfos {
		text-align: center;
		padding: 100rpx;
		color: #999
	}

	.popup {
		width: 100vw;
		height: 500rpx;
		background-color: #151925;
	}

	.popupTitle {
		padding: 20rpx;
		border-bottom: 1rpx solid #12121c;
	}

	.rose {
		width: 20vw;
		text-align: center;
		float: left;
		background: #151925;
		border: 1rpx solid #151925;
		border-radius: 15rpx;
		margin: 10rpx;
	}

	.selectRose {
		background: #282b34;
		border: 1rpx solid #747683;
	}

	.label {
		float: left;
		width: auto;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #CCC;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.viplabel {
		float: left;
		width: auto;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #000;
		color: #FFF;
		border: 1rpx solid #CCC;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.indexBox {
		margin: auto;
		margin-top: 20rpx;
		width: auto;
		height: auto;
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.stateBox {
		border-radius: 0rpx 20rpx 0rpx 20rpx;
		background-color: #E6F7EF;
		color: #4EAE89;
		font-size: 24rpx;
		padding: 8rpx 40rpx;
	}

	.NoticeStateBox {

		position: absolute;
		right: 0;
		top: 0;
	}

	.onCity {
		color: #999;
		margin-left: 10rpx;
		padding-bottom: 5rpx;
		font-size: 24rpx
	}

	.readed {
		font-size: 22rpx;
		color: #999;
		background-color: #dddddd;
		position: absolute;
		border-radius: 10rpx 0 10rpx 0;
		top: 0;
		left: 0;
		padding: 6rpx 10rpx;
	}

	.noticeTitle {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.noticeMemo {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.userlabel {
		display: flex;
		margin-top: 20rpx;
		/* justify-content:center; */
	}

	.userlabel view {
		background-color: #e0e0e0;
		color: #666;
		font-size: 18rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
		padding: 6rpx 10rpx 6rpx 10rpx;
	}

	.authed {
		width: 25rpx;
		height: 25rpx;
		margin-left: 10rpx
	}

	.mailicon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx
	}

	.showicon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.userInfo {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
	}

	.userHeadPic {
		width: 35rpx;
		height: 35rpx;
		background-color: #00cbff;
		border-radius: 35rpx;
	}

	.userHeadPic image {
		width: 35rpx;
		height: 35rpx;
		border-radius: 35rpx;
	}

	.userNicker {
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	.rightPic {
		width: 160rpx;
		height: 160rpx;
		// background-image: url('https://hbimg.huabanimg.com/e2f264f714b5e59a899535cb423bd1bd8498ef1e1184cb-eowWX4_fw658');
		background-size: cover;
		background-position: center;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.rightPic image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.indexBoxBottom {
		clear: both;
		margin-top: 20rpx;
		padding-top: 20rpx;
		// padding-bottom:20rpx;
		border-top: 1rpx solid #f0f0f0;
		color: #CCC;
		font-size: 24rpx
	}

	.indexBoxCount {
		width: 180rpx;
		font-size: 24rpx
	}

	.getBaoming {
		width: 120rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.readcount {
		width: 100rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.words-image {
		height: 200rpx;
		border-radius: 10rpx;
	}
</style>